<template>
  <layout title="补贴对象与资金分配计划表">
    <!-- 顶部操作 -->
    <section slot="search">
      <custom-form
        ref="search-form"
        class="search-form"
        v-model="tableSearch"
        layout="inline"
        mode="search"
        :FormList="searchColumns"
      >
        <a-button
          class="action-button"
          type="primary"
          @click="search()"
        >搜索</a-button>
      </custom-form>
      <!-- <a-input placeholder="产品名称或者编号" v-model="tableSearch.searchKey" allowClear style="width: 200px;" /> -->
    </section>

    <section class="message-tips ant-alert ant-alert-info ant-alert-no-icon">
      
      <section class="opreate">
        <a-popconfirm
          :title="batchIsUsed ? `是否全部取消当前行政区大户的补贴标记？` : '是否全部标记将当前行政区大户为“参与补贴”？'"
          ok-text="确认"
          cancel-text="取消"
          @confirm="batchIsUsed = !batchIsUsed"
        >
          <a-spin size="small" :spinning="(batchIsUsedLoading || tableLoading)">
            <a-button>
              <a-checkbox v-model="batchIsUsed"></a-checkbox>
              <span style="margin-left: 10px;">批量修改当前行政区下补贴状态</span>
            </a-button>
          </a-spin>
        </a-popconfirm>
      </section>
      {{ `下列共${total}户（${isUsed}）` }}
    </section>

    <!-- 产品列表 -->
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      class="table-total"
      table-layout="fixed"
      :rowKey="record => record.big_mb_id"
      :row-selection="rowSelection"
      :pagination="false"
      :loading="tableLoading"
      :customRow="customTableRow"
      :scroll="{
        x: 'max-content',
        y: tableClientHeight
      }"
      @change="handleTableChange"
      bordered
    >
      
      <template
        slot="serial"
        slot-scope="row, record, index"
      >
        {{ index + 1}}
      </template>
      <template
        slot="pay_unit"
        slot-scope="row"
      >
        {{getLabel(row.pay_unit, [], 'pay_unit')}}
      </template>
      <template
        slot="big_mb_bank_code"
        slot-scope="row"
      >
        {{getLabel(row.big_mb_bank_code, [], 'big_mb_bank_code')}}
      </template>
      <template
        slot="big_mb_type"
        slot-scope="row"
      >
        {{getLabel(row.big_mb_type, [], 'big_mb_type')}}
      </template>

      <template
        slot="pay_price_title"
      >
        补贴标准<br>(元/亩)
      </template>
      <!-- 按钮区 -->
      <template
        slot="action"
        slot-scope="row"
      >
        <a-button
          class="action-button"
          type="primary"
          size="small"
          @click="handleTableEdit(row, 'farmland')"
        >管理确权面积</a-button>
        <a-button
          class="action-button"
          type="primary"
          size="small"
          @click="handleTableEdit(row, 'grain')"
        >管理粮食面积</a-button>
      </template>
    </a-table>

    <!-- 产品列表分页器 -->
    <a-pagination
      slot="paging"
      :pageSizeOptions="pageSizes"
      :total="total"
      showSizeChanger
      :show-total="showTotal"
      :pageSize="pageSize"
      v-model="currentPage"
      @showSizeChange="changePageSize"
      @change="changePage"
    >
    </a-pagination>

    <!-- 编辑产品数据 -->
    <a-modal
      :visible="visible"
      :title="visibleTitle"
      centered
      @cancel="visible = false"
      @ok="handleSubmit"
    >
      <custom-form
        ref="custom-form"
        class="custom-form"
        v-model="currentRow"
        :FormList="formColumns"
        :mode="customMode"
        v-bind="formItemLayout"
        layout="horizontal"
      ></custom-form>
    </a-modal>

  </layout>
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import { State, Mutation, Getter, namespace } from 'vuex-class'
import EventsMixin from '@/mixin/events'
import { TableMixin, AuthMixin } from '@/mixin'

import { TableLayout } from '@/layouts'
import CustomForm from '@/components/src/Form'
import { userServices, IAdmin } from '@/common/services'
import { famerServices, IMember } from '@/common/services/famer'
import { commonServices } from '@/common/services/common'
import { subsidyServices, IStatistics } from '@/common/services/subsidy'
import { memberRole, LargeMemberType, PayUnitType } from '@/common/enum'
import { RosterMixins } from './mixin'

@Component({
  components: {
    Layout: TableLayout,
    CustomForm
  }
})
export default class AdminList extends Mixins(
  EventsMixin,
  AuthMixin,
  RosterMixins
) {

  public commonParams = {
    s_a_id: ''
  }

  // 产品列表搜索条件
  public tableSearch = {
    switch: '2'
  }

  // 自定义mode
  public customMode = ''

  public columnWidth = '90px'
  // public selectedTitle = '是否补贴'
  public customRowSelectionOptions = {
     getCheckboxProps: (record: any) => {
       return {
        props: {
          disabled: !record.iid || !record.big_mb_ck, // Column configuration not to be checked
          name: record.name,
        }
      }
     },
  }

  public customRow = (record: any) => {
    return {
      class: {
        'row-disabled': (+record.big_mb_ck < 50)
      },
      on: {
        click: () => {
          if (record.big_mb_ck === null) {
            this.$message.error('当前大户补贴面积未经过区县核定，暂不能参与补贴！！')
            return
          }
          if (+record.big_mb_ck < 50) {
            this.$message.error('当前大户补贴面积未超过50亩，暂不能参与补贴！！')
            return
          }
          //  || +record.pay_size_total < 50
        }
      }
    }
  }

  // 产品列表表格信息
  public columns: ITable.IColumn[] = [
    {
      title: '补贴申请号',
      dataIndex: 'apl_bh',
      key: 'apl_bh',
      width: 140,
      ellipsis: true,
      form: {
        type: 'a-input',
        placeholder: '编号自动生成',
        disabled: true,
        renderMode: ['edit']
      }
    },
    {
      title: '大户编号',
      dataIndex: 'big_mb_id',
      key: 'big_mb_id',
      width: 120,
      form: {
        type: 'a-input',
        placeholder: '编号自动生成',
        disabled: true,
        renderMode: ['edit']
      }
    },
    {
      title: '大户名称',
      dataIndex: 'big_mb_nam',
      key: 'big_mb_nam',
      width: 150,
      form: {
        type: 'a-input',
        placeholder: '请输入大户名称',
        isShowQuery: true,
        renderMode: ['edit']
      }
    },
    {
      title: '大户类型',
      key: 'big_mb_type',
      scopedSlots: { customRender: 'big_mb_type' },
      width: 80,
      ellipsis: true,
      form: {
        type: 'a-select',
        placeholder: '请选择大户类型',
        dict: LargeMemberType,
        renderMode: ['edit']
      }
    },
    {
      title: '法定编码',
      dataIndex: 'big_mb_law_id',
      key: 'big_mb_law_id',
      width: 160,
      form: {
        type: 'a-input',
        placeholder: '请输入法定编码',
        renderMode: ['edit']
      }
    },
    {
      title: '种粮地行政区',
      dataIndex: 's_a_nam_all',
      key: 's_a_nam_all',
      width: 200,
      ellipsis: true,
      form: {
        type: 'a-input',
        placeholder: '请输入种粮地点',
        renderMode: ['edit']
      }
    },
    {
      title: '种粮地点',
      dataIndex: 'big_mb_addr',
      key: 'big_mb_addr',
      width: 200,
      ellipsis: true,
      form: {
        type: 'a-input',
        placeholder: '请输入种粮地点',
        renderMode: ['edit']
      }
    },
    {
      title: '负责人姓名',
      dataIndex: 'big_mb_user',
      width: 100,
      key: 'big_mb_user',
      form: {
        type: 'a-input',
        placeholder: '请输入负责人姓名',
        renderMode: ['edit', 'add']
      }
    },
    {
      title: '负责人身份证',
      dataIndex: 'big_mb_sfz',
      width: 160,
      key: 'big_mb_sfz',
      form: {
        type: 'a-input',
        placeholder: '请输入负责人身份证',
        renderMode: ['edit', 'add']
      }
    },
    {
      title: '联系电话',
      dataIndex: 'big_mb_tel',
      key: 'big_mb_tel',
      width: 110,
      form: {
        type: 'a-input',
        placeholder: '请输入联系电话',
        renderMode: ['edit', 'add']
      }
    },
    {
      title: '银行账号',
      dataIndex: 'big_mb_bank_id',
      key: 'big_mb_bank_id',
      width: 180,
      form: {
        type: 'a-input',
        placeholder: '请输入银行卡号',
        renderMode: ['edit']
      }
    },
    {
      title: '开户名',
      dataIndex: 'big_mb_bank_user',
      key: 'big_mb_bank_user',
      width: 150,
      form: {
        type: 'a-input',
        placeholder: '请输入开户名',
        renderMode: ['edit']
      }
    },
    {
      title: '开户行',
      key: 'big_mb_bank_code',
      width: 150,
      ellipsis: true,
      scopedSlots: { customRender: 'big_mb_bank_code' },
      form: {
        type: 'a-select',
        placeholder: '请选择开户银行',
        dict: [],
        renderMode: ['edit']
      }
    },
    {
      title: '耕地面积（亩）',
      width: 300,
      children: [
        {
          title: '合计',
          key: 'field',
          dataIndex: 'field',
          width: 110,
          align: 'right',
          form: {
            type: 'a-input',
            placeholder: '请输入耕地总面积',
            renderMode: ['farmland']
          }
        },
        {
          title: '承包地',
          key: 'field1',
          sorter: true,
          dataIndex: 'field1',
          sortDirections: ['ascend', 'descend'],
          width: 110,
          align: 'right',
          form: {
            type: 'a-input',
            placeholder: '请输入耕地总面积',
            renderMode: ['farmland'],
            isShowQuery: true,
            querySection: true
          }
        },
        {
          title: '增加面积',
          key: 'field2',
          sorter: true,
          dataIndex: 'field2',
          sortDirections: ['ascend', 'descend'],
          width: 110,
          align: 'right',
          form: {
            type: 'a-input',
            placeholder: '请输入耕地总面积',
            renderMode: ['farmland'],
            isShowQuery: true,
            querySection: true
          }
        },
        {
          title: '减少面积',
          key: 'field3',
          sorter: true,
          dataIndex: 'field3',
          sortDirections: ['ascend', 'descend'],
          width: 110,
          align: 'right',
          form: {
            type: 'a-input',
            placeholder: '请输入耕地总面积',
            renderMode: ['farmland'],
            isShowQuery: true,
            querySection: true
          }
        },
      ]
    },
    {
      title: '粮食种植面积(亩)',
      key: 'plant',
      width: 120,
      dataIndex: 'plant',
      sorter: true,
      align: 'right',
      sortDirections: ['ascend', 'descend'],
      form: {
        type: 'a-input',
        isShowQuery: true,
        querySection: true,
        isShowFrom: false
      }
    },
    {
      title: '购买农资花费(元)',
      key: 'material',
      dataIndex: 'material',
      width: 120,
      align: 'right',
    },
    {
      title: '农机数量(台)',
      key: 'machine',
      dataIndex: 'machine',
      width: 80,
      align: 'right',
    },
    {
      title: '补贴面积',
      dataIndex: 'pay_size_total',
      key: 'pay_size_total',
      align: 'right',
      width: 110,
    },
    {
      title: '核定面积',
      dataIndex: 'big_mb_ck',
      key: 'big_mb_ck',
      align: 'right',
      width: 110,
    },
    {
      // title: '补贴标准(元/亩)',
      slots: { title: 'pay_price_title' },
      dataIndex: 'pay_price',
      key: 'pay_price',
      align: 'right',
      width: 110,
    },
    {
      title: '补贴参照',
      scopedSlots: { customRender: 'pay_unit' },
      key: 'pay_unit',
      width: 90,
      align: 'center',
      form: {
        type: 'a-select',
        placeholder: '请选择补贴参照',
        isShowFrom: false,
        dict: PayUnitType
      }
    },
    {
      title: '补贴总金额',
      dataIndex: 'pay_price_total',
      key: 'pay_price_total',
      align: 'right',
      width: 110,
    }
  ]

  public tableApi = {
    list: subsidyServices.getSubsidyList
    // add: famerServices.updateMemberGrain,
    // edit: famerServices.updateMemberGrain
    // del: userServices.deleteAdmin,
    // imageUpload: 'uploadStoreImage',
    // imageRemove: 'delStoreImage'
  }

  @Watch('currentAreaId', { immediate: true })
  public handlerCurrentAreaIdChange() {
    this.init()
  }

  public init() {
    this.commonParams.s_a_id = this.currentAreaId
    this.getData()
  }
  
  public async mounted() {
    this.getBankTypes()
    this.handlerAddGrainColumn()
  }

  public handlerAddGrainColumn() {
    const grains = [
      '水稻',
      '玉米',
      '小麦',
      '红苕',
      '马铃薯',
      '大豆',
      '绿豆',
      '豌葫豆',
      '高粱',
      '荞麦',
      '肾豆',
      '红小豆'
    ]
    const grainsColumns = grains.map((item, index) => {
      const key = 'plant' + (index + 1)
      return {
        title: item,
        dataIndex: key,
        key,
        form: {
          type: 'a-input',
          placeholder: `请输入${item}面积`,
          renderMode: ['grain'],
          isShowList: false
        }
      }
    })
    this.columns = this.columns.concat(grainsColumns)
  }

  
  public getBankTypes() {
    return commonServices.getBankType().then(res => {
      const dict = []
      this.changeDict(
        'big_mb_bank_code',
        Object.keys(res.data).map(key => {
          return {
            label: res.data[key],
            value: key
          }
        })
      )
    })
  }

  public handlerTableAdd() {
    this.tableAdd()
    this.$nextTick(() => {
      this.currentRow = Object.assign(
        {},
        { s_a_id: this.currentAreaId, role: 1 }
      )
    })
  }

  public handlerFamily(row: IMember) {
    this.events.trigger('select-houseHolder', row)
  }

  // 编辑前数据预处理
  public async handleTableEdit(row: any, mode: string) {
    this.customMode = mode
    this.tableEdit(Object.assign({}, row))
  }
}
</script>

<style scoped lang="less">
.action-button {
  margin: 0px 10px 0px 10px;
}
.form-item-class {
  margin-bottom: 0px;
}
.img-box {
  width: 100px;
  height: 100px;
  margin: 10px;
}
.item-blue {
  color: #1989fa;
}
/deep/ .ant-table-body tr {
  td,
  th {
    white-space: nowrap;
  }
}
/deep/ th[key="selection-column"] {
  position: relative;
  padding-top: 24px!important;
  padding-bottom: 0!important;
  &::after {
    content: '是否补贴';
    position: absolute;
    top: 10px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
  }
}

.message-tips {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.opreate {
  margin-left: 6px;
  margin-right: 10px;
  display: inline-block
}
/deep/ .row-disabled {
  background-color: rgba(255, 49, 49, 0.5);
  cursor: pointer;
}
</style>
